<template>
  <div>
    <div style="position: absolute;top:10px;left:247px;right: 12px;height: 60px;border-radius: 4px;overflow: hidden;
       background-color: #fff;min-width: 975px;">
      <el-carousel v-if="false && images.length" trigger="click" :interval="9000" direction="vertical"  indicator-position="none" arrow="never" height="60px" style="width:100%">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="image.src + '?token=' + elm.info.token" height="100%"
               style="width: 100%; object-fit: cover;" :title="image.title"
               alt="图片丢失了" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-container style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%;">
      <div class="el-title" style="padding-top:0px;padding-left:0px;font-size:18px;">
        <el-link href="/business/my/studio">
          <img src="/images/logo.svg" style="height: 45px; margin-top:11px; line-height:45px;margin-left: -27px;" />
        </el-link>
      </div>
      <!-- 左侧菜单 -->
      <el-aside :style="asideStyle">
        <el-scrollbar class="left-menu-panel">
          <el-menu ref="menu" :collapse="isCollapse" :default-active="active" :active="active" :collapse-transition="false">
            <template v-for="(item, index) in menuDataFilter('')">
              <template v-if="hasSub(item.id)">
                <el-submenu :index="item.id" :key="index">
                  <template slot="title">
                    <template v-if="item.icon!=''">
                      <li :class="item.icon"></li>
                    </template>
                    <span slot="title">{{item.name}}</span>
                  </template>
                  <!-- 二级循环  -->
                  <template v-for="(subItem, subIndex) in menuDataFilter(item.id)">
                    <template v-if="hasSub(subItem.id)">
                      <el-submenu :index="subItem.id" :key="subIndex">
                        <template slot="title">
                          <template v-if="subItem.icon!=''">
                            <li :class="subItem.icon"></li>
                          </template>
                          <span slot="title">{{subItem.name}}</span>
                        </template>
                        <!-- 三级循环 -->
                        <template v-for="(sonItem, sonIndex) in menuDataFilter(subItem.id)">
                          <template v-if="hasSub(sonItem.id)">
                            <el-submenu :index="sonItem.id" :key="sonIndex">
                              <template slot="title">
                                <template v-if="sonItem.icon!=''">
                                  <li :class="sonItem.icon"></li>
                                </template>
                                <span slot="title">{{sonItem.name}}</span>
                              </template>
                              <!-- 四级循环 -->
                              <el-menu-item :id="'m'+sonSubItem.id" :index="sonSubItem.id" :key="sonSubIndex" v-for="(sonSubItem, sonSubIndex) in menuDataFilter(sonItem.id)" v-on:click="href(sonSubItem)">
                                <template v-if="sonSubItem.icon!=''">
                                  <li :class="sonSubItem.icon"></li>
                                </template><span slot="title">{{sonSubItem.name}}</span>
                              </el-menu-item>
                            </el-submenu>
                          </template>
                          <template v-else>
                            <el-menu-item :id="'m'+sonItem.id" :index="sonItem.id" :key="sonIndex" v-on:click="href(sonItem)">
                              <template v-if="sonItem.icon!=''">
                                <li :class="sonItem.icon"></li>
                              </template><span slot="title">{{sonItem.name}}</span>
                            </el-menu-item>
                          </template>
                        </template>
                      </el-submenu>
                    </template>
                    <template v-else>
                      <el-menu-item :id="'m'+subItem.id" :index="subItem.id" :key="subIndex" v-on:click="href(subItem)">
                        <template v-if="subItem.icon!=''">
                          <li :class="subItem.icon"></li>
                        </template><span slot="title">{{subItem.name}}</span>
                      </el-menu-item>
                    </template>
                  </template>
                </el-submenu>
              </template>
              <template v-else>
                <el-menu-item :id="'m'+item.id" :index="item.id" :key="index" v-on:click="href(item)">
                  <template v-if="item.icon!=''">
                    <li :class="item.icon"></li>
                  </template><span slot="title">{{item.name}}</span>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <!-- 上部菜单 -->
      <el-container :style="containerStyle">
        <el-header style="padding-top:0px;height:12px;z-index:99;padding-right:30px;">
          <div style="float:right;margin-right:-6px;margin-top:12px;">
            <el-button type="text" size="mini" icon="el-icon-switch-button" @click="logout()"
                       style="color:#666;font-size:14px;">退出</el-button>
          </div>
          <div style="float:right;margin-right:15px;margin-top:12px;;">
            <el-button type="text" size="mini" icon="el-icon-edit-outline" @click="editPass()"
                       style="color: #666; font-size: 14px;">修改密码</el-button>
          </div>
          <div style="float: right; margin-right: 15px; margin-top: 34px; line-height: 14px;" class="yhxx">
            <el-dropdown trigger="click" style="cursor: pointer; color: #666"  @command="handleCommand">
                            <span class="el-dropdown-link">
                                {{info.user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item disabled style="color:#bbb !important;">单位</el-dropdown-item>
                <el-dropdown-item disabled>
                  {{info.org.name}}
                </el-dropdown-item>
                <el-dropdown-item disabled style="color:#bbb !important;" divided>岗位</el-dropdown-item>
                <el-dropdown-item disabled v-for="item in info.role">{{item.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div style="width:36px;height:36px;float:right;margin-right:2px;margin-top:20px;
                        border-radius:18px;overflow:hidden;border:1px solid transparent ;line-height:36px;position:relative;">
            <img style="height:34px;width:34px;position:absolute;top:50%;margin-top:-17px;left:50%;margin-left:-17px;" src="/images/user_face.png" />
          </div>
          <div style="width:20px;height:20px;float:right;margin-right:32px;margin-top:-1px;position:relative;cursor: pointer" @click="openai()" title="智能助手">
            <img style="height:40px;width:40px;position:absolute;top:50%;margin-top:12.5px;left:53%;margin-left:-8px;" src="/res/jqr.gif" />
          </div>
          <div style="float:right;margin-right:-6px;margin-top:12px;">
            <img src="/images/mob-turn-mobile-02.svg" style="height:26px;margin-top:16px;margin-right: 25px;"
                 @click="$emit('turn_show', 'mobile')"/>
          </div>
        </el-header>
        <div style="height:100%;position:relative;">
          <el-main>
            <div class="heng-head" style="z-index: 100;background-color: transparent!important;width: calc(100% - 400px)">
              <div style="height:16px;background-color:#0176d5;width:3px;float:left;margin-top:21.5px;margin-left:10px;"></div>
              <div style="float:left;margin-left:6px;margin-top: 12px">
                <el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item v-for="item in menuText" style="line-height: 35px">{{item}}</el-breadcrumb-item></el-breadcrumb>
              </div>
              <div style="clear:both"></div>
            </div>
            <!-- 内容主体区域 -->
            <div class="iframediv" :style="iframedivStyle">
              <div class="global_main">
                <div v-show="isChatOpen"
                     class="draggable-box"
                     :style="style"
                     :class="chatBoxClass"
                     @mousedown="startResize">
                  <div style="width: 100%;height: 35px;display: flex;align-items: center;background-color:#3a8ee6;">
                    <div
                        style="margin: 5px;width: calc(100% - 30px);font-family: 'Kaiti SC';font-size: 20px;color: #0077ff;color: white;">
                      AI助手
                    </div>
                    <div class="el-icon-full-screen" v-if="chatBoxClass == 'chat-box-min'"
                         style="justify-content:flex-end;margin-right: 10px;color: #EEEEEE;"
                         @click="changeBoxClass('chat-box-max')"/>
                    <div class="el-icon-copy-document" v-else
                         style="justify-content:flex-end;margin-right: 10px;color: #EEEEEE;"
                         @click="changeBoxClass('chat-box-min')"/>
                    <div class="el-icon-close" src="@/assets/images/close.jpg"
                         style="justify-content:flex-end;margin-right: 10px;color: #EEEEEE;"
                         @click="isChatOpen = false"/>
                  </div>
                  <!--        <chat-box></chat-box>-->
                  <div>
                    <!--<iframe
                        :src="'http://124.70.75.119:81/DcpAi?logo='+elm.info.tenant+'&token=132135461651132'"
                        style="width: 100%; height: calc(90%); margin-top: 35px"
                        frameborder="0"
                        allow="microphone">
                    </iframe>-->
                    <iframe
                        :src="'http://124.70.75.119:81/DcpAi?token=132135461651132'"
                        style="width: 100%; height: calc(90%); margin-top: 35px;"
                        frameborder="0"
                        allow="microphone">
                    </iframe>
                  </div>

                </div>
                <main-area  ref="elmain">
                  <router-view v-if="routerViewShow"></router-view>
                </main-area>
              </div>
            </div>
          </el-main>
        </div>
      </el-container>
    </el-container>
    <elm-dialog ref="dialog"></elm-dialog>
  </div>
</template>

<script>
import mainArea from '@/system/main_area.vue'
import { initDingH5RemoteDebug } from "dingtalk-h5-remote-debug";
export default {
  //extends: elmVueBase,
  components: { mainArea ,initDingH5RemoteDebug},
  data() {
    return {
      menuData: elm.info.menu,
      isCollapse: false,
      active: null,
      topactive:null,
      menuText: [],
      isChatOpen: false,
      chatBoxClass: 'chat-box-min',
      isResizing: false,
      boxWidth: 800,
      startX: 0,
      startY: 0,
      aiToken:'',
      style: {width: '800px',zIndex:1000},
      asideStyle: { width: "224px" },
      toggleStyle: { left: "224px" },
      iframedivStyle: { top: "64px" },
      containerStyle: { marginLeft: "0px",'min-width':'1000px' },
      iconName: "el-icon-s-fold",
      topItem: {},
      tid: null,
      info: { org: elm.info.org, user: elm.info.user, role: elm.info.role, system: elm.settings.systemName},
      routerViewShow: false,
      images: [],
    }
  },
  async created() {
    await this.getImg();
    await this.getToken();
    var mod = null;
    for (var i = 0; i < this.menuData.length; i++) {
      if (this.$router.currentRoute.meta.id == this.menuData[i].id) {
        mod = this.menuData[i];
        break;
      }
    }
    if (mod != null) {
      for (var i = 0; i < this.menuData.length; i++) {
        if (this.menuData[i].id == mod.pid) {
          this.topItem = this.menuData[i];
          break;
        }
      }
      if (this.topItem == {}) {
        this.topItem = mod;
      }
    }
    else {
      for (var i = 0; i < this.menuData.length; i++) {
        if (this.menuData[i].pid == '0' || this.menuData[i].pid == null || this.menuData[i].pid == '') {
          this.topItem = this.menuData[i];
          break;
        }
      }
      for (var i = 0; i < this.menuData.length; i++) {
        if (this.menuData[i].pid == this.topItem.id ) {
          mod= this.menuData[i];
          break;
        }
      }
      if(mod==null)
      {
        for (var i = 0; i < this.menuData.length; i++) {
          if (this.menuData[i].id == this.topItem.id ) {
            mod= this.menuData[i];
            break;
          }
        }
      }
    }
    this.routerViewShow = true;
    this.$nextTick(()=>{
      if(this.topItem.id!=undefined && this.topItem.id!=mod.id){
        this.$refs.menu.open(this.topItem.id);
      }
      if(mod.target!="blank") {
        this.topItemClick(this.topItem, mod);
      }
    })
    elm.main.vue = this;
  },
  mounted() {
    elm.main.area = this.$refs["elmain"];
    initDingH5RemoteDebug();
  },
  methods: {
    async getToken() {
      let res = await elm.post('/system/login/ai/getToken');
      this.aiToken =res;
      console.log('aitoken', this.aiToken)
    },
    startResize(event) {
      this.isResizing = true;
      this.startX = event.clientX;
      document.addEventListener('mousemove', this.doResize);
      document.addEventListener('mouseup', this.stopResize);
    },
    doResize(event) {
      if (this.isResizing) {
        this.boxWidth -= event.clientX - this.startX;
        this.startX = event.clientX
        this.$set(this.style, 'width', this.boxWidth + 'px');
      }
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.doResize);
      document.removeEventListener('mouseup', this.stopResize);
    },
    changeBoxClass(name) {
      if (name == 'chat-box-max') {
        this.style.width = 'calc(100% - 200px)';
      } else {
        this.style.width = '800px';
      }
      this.chatBoxClass = name;
    },
    async getImg(){
      var res= await elm.post('/business/my/GetImgData',{});
      var minNum=5;
      if(res.length<minNum)
        minNum=res.length;
      for(var i=0;i<minNum;i++)
      {
        this.images[i]=res[i];
        this.images[i].src="/api/system/login/io/Viewer/biz_cms_news_files/"+res[i].id;
      }
    },
    openai()
    {
      this.isChatOpen = true;
    },
    handleCommand(command)
    {
      if(command=="open_ei")
      {
      }
    },
    async logout() {
      let res = await elm.post('/system/login/Logout');
      if(res.status=="success")
      {
        try{
          //记录日志
          let oper_log = {};
          oper_log.oper_type = "0"; //PC
          oper_log.nick_name = elm.info.user.name;
          oper_log.menu_title = "/system/login/Logout";
          oper_log.oper_time = new Date().toLocaleString();
          oper_log.msg = "退出";
          await elm.post('/system/login/log/Upsert', oper_log);
          elm.info.token =null;
          elm.info.system =null;
          elm.info.menu =null;
          elm.info.user =null;
          elm.info.org =null;
          elm.info.role =null;
          this.v("你已退出登录");
        }
        catch{}

        setTimeout(()=>{
          top.location.href = elm.settings.routefix+elm.settings.loginPath;
        }, 1000);
      }

    },
    menuDataFilter(pid) {
      var filterdata = [];
      for (var i = 0; i < this.menuData.length; i++) {
        if (this.menuData[i].pid == pid) {
          filterdata.push(this.menuData[i]);
        }
        else if (pid == "0" || pid == null || pid == "") {
          if (this.menuData[i].pid == null || this.menuData[i].pid == "0" || this.menuData[i].pid == "") {
            filterdata.push(this.menuData[i]);
          }
        }
      }
      return filterdata;
    },
    hasSub(id) {
      for (var i = 0; i < this.menuData.length; i++) {
        if (this.menuData[i].pid == id) {
          return true;
        }
      }
      return false;
    },
    href(item) {
      //记录日志
      let oper_log = {};
      oper_log.oper_type = "0"; //PC
      oper_log.nick_name = elm.info.user.name;
      oper_log.menu_title = item.navigateurl;
      oper_log.oper_time = new Date().toLocaleString();
      oper_log.msg = item.name;
      elm.post('/system/login/log/Upsert', oper_log);
      if (item.target == "blank") {
        window.open(item.navigateurl);
        return;
      }
      function menuText(item,_this) {
        for (var i = 0; i < _this.menuData.length; i++) {
          if (_this.menuData[i].id == item.pid) {
            _this.menuText.unshift(_this.menuData[i].name);
            menuText(_this.menuData[i], _this);
          }
        }
      }
      this.menuText = [];
      this.menuText.push(item.name);
      menuText(item,this);
      this.tid = item.id;
      this.$nextTick(() => {
        document.querySelectorAll(".el-aside .is-active").forEach((c) => {
          c.classList.remove("is-active");
        });
        document.querySelectorAll("#m" + this.tid ).forEach((c) => {
          c.classList.add("is-active");
        });
        if (this.$router.currentRoute.meta.id != this.tid) {
          this.$router.push({ path: item.navigateurl });
        }
      });
    },
    topItemClick(item,mod) {
      this.topItem = item;
      this.topactive = "t" + item.id;
      if (mod != null) {
        this.href(mod);
      }
    },
    editPass() {
      elm.dialog.open(this, elm.settings.routefix+"/system/pass_eidt", "修改密码", 500, 400, {});
    }
  }

};
</script>
<style>
@import url('theme/main.css');
</style>
<style scoped>

.chat-box-min {
  position: fixed;
  right: 1px;
  width: 500px;
  height: calc(100% - 5%);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保聊天框在最上层 */
  cursor: move;
  touch-action: none;
}

.chat-box-max {
  position: fixed;
  right: 1px;
  width: calc(100% );
  height: calc(100% );
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保聊天框在最上层 */
}
.iframediv {
  border-radius: 4px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 7px;
  margin-bottom: 12px;
}
.global_main {
  border-radius: 6px;
  overflow: auto;
  margin-bottom: 10px;
}
.el-aside {
  margin-top: 83px;
  padding-top: 0px;
  border-radius: 4px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin-bottom: 12px;
  margin-left: 11px;
}
.left-menu-panel {
  height: 100%;
  background-color: rgb(255,255,255);
}
.el-aside .el-menu-item {
  color: #505968;
}
.el-title {
  background-color: rgb(255, 255, 255);
  width: 224px;
  height: 72px;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-left: 11px;
  margin-top: 11px;
  color: rgb(0, 104, 253);
}
.el-dropdown-menu .el-dropdown-menu__item
{
  line-height: 30px !important;
  height: 30px !important;
  color: #606266 !important;
  font-size: 14px !important;
  padding: 0 20px !important;
  cursor: pointer !important;
}
.el-dropdown-menu__item--divided:before {
  height: 0px !important;
}

.el-dropdown-menu__item.is-disabled {
  cursor: default;
  color: #bbb;
  pointer-events: none;
}
</style>